import React, { Component } from "react";
// import { createPortal } from "react-dom";

import withPortal from "./withPortal";
import { bool, string, func, oneOfType, number } from "prop-types";
import "./style.less";

class Modal extends Component {
  // 数据类型
  static propTypes = {
    open: bool.isRequired,
    title: string,
    onOk: func,
    onCancel: func,
    cancelText: string,
    okText: string,
    width: oneOfType([string, number]),
  };

  // 默认值
  static defaultProps = {
    title: "Basic Modal",
    okText: "确定",
    cancelText: "取消",
    width: 400,
  };

  render() {
    // console.log(this.props);
    return (
      this.props.open && (
        <div className="container">
          <div
            className="center"
            style={{
              width: this.props.width + "px",
            }}
          >
            <div className="title">{this.props.title}</div>
            <div className="content">{this.props.children}</div>
            <div className="bottom">
              <button onClick={this.props.onCancel}>
                {this.props.cancelText}
              </button>
              <button onClick={this.props.onOk}>{this.props.okText}</button>
            </div>
          </div>
        </div>
      )
    );
  }
}

export default withPortal(Modal);
